<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-row>
      <el-button
        class="btn"
        type="danger"
        @click="newAdd"
      >新增模板</el-button>
    </el-row>
    <el-table
      :data="freightlist"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="templateType"
        label="模板类型"
        :formatter="formatterTemplate"
      >
      </el-table-column>
      <el-table-column
        prop="transportType"
        label="运送类型"
        :formatter="formatterTransport"
      >
      </el-table-column>
      <el-table-column
        prop="associatedCityList"
        label="关联城市"
        :formatter="formatterAssociated"
      >
      </el-table-column>
      <el-table-column
        prop="firstWeight"
        label="首重"
      > </el-table-column>
      <el-table-column
        prop="continuousWeight"
        label="续重"
      >
      </el-table-column>
      <el-table-column
        prop="lightThrowingCoefficient"
        label="轻抛系数"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="184px"
        align="center"
      >
        <template
          #default="
          {row}"
        >
          <el-link
            type="primary"
            :underline="false"
            @click="edit(row)"
          >编辑</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link
            type="danger"
            :underline="false"
            @click="del(row.id)"
          >删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFrom"
        :model="templateData"
        :rules="templateRules"
      >
        <el-form-item
          label="模板类型"
          :label-width="formLabelWidth"
          prop="templateType"
        >
          <el-select
            v-model="templateData.templateType"
            placeholder="请选择模板类型"
          >
            <el-option
              v-for="item in templateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="运行类型"
          :label-width="formLabelWidth"
          prop="transportType"
        >
          <el-select
            v-model="templateData.transportType"
            placeholder="请选择运行类型"
          >
            <el-option
              v-for="item in transportList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联城市"
          :label-width="formLabelWidth"
          prop="associatedCityList"
        >
          <span v-if="templateData.templateType !== 3">{{
            cityAll[0]
          }}</span>
          <el-checkbox-group
            v-else
            v-model="templateData.associatedCityList"
          >
            <el-checkbox
              v-for="city in citylist"
              :key="city.key"
              :label="city.label"
            >
              {{ city.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="首重价格"
          :label-width="formLabelWidth"
          prop="firstWeight"
        >
          <el-input
            v-model="templateData.firstWeight"
            suffix="元"
            placeholder="请输入首重价格"
          >
          </el-input></el-form-item>
        <el-form-item
          label="续重价格"
          :label-width="formLabelWidth"
          prop="continuousWeight"
          class="price"
        >
          <el-input
            v-model="templateData.continuousWeight"
            placeholder="请输入续重价格"
          >
          </el-input></el-form-item>
        <el-form-item
          label="轻抛系数"
          :label-width="formLabelWidth"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model="templateData.lightThrowingCoefficient"
            placeholder="请输入轻抛系数"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="warning"
          class="btn"
          @click="add"
        >确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  freightManageList,
  freightManageOperate,
  freightManageDelete
} from '@/api/transit'
export default {
  data() {
    return {
      title: '新增模板',
      freightlist: [],
      dialogVisible: false,
      formLabelWidth: '120px',
      // 模板下拉数组
      templateList: [
        { value: 1, label: '同城寄' },
        { value: 2, label: '省内寄' },
        { value: 3, label: '经济区互济' },
        { value: 4, label: '跨省' }
      ],
      transportList: [{ value: 1, label: '普快' }, { value: 2, label: '特快' }],
      // 添加编辑数据
      // ['全国', '京津冀', '江浙沪', '川渝', '黑吉辽']
      cityAll: ['全国'],
      citylist: [
        { key: '2', label: '京津冀' },
        { key: '3', label: '江浙沪' },
        { key: '4', label: '川渝' },
        { key: '5', label: '黑吉辽' }
      ],
      templateData: {
        associatedCityList: [],
        computeWeight: '',
        continuousWeight: '',
        created: '',
        expense: '',
        firstWeight: '',
        id: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: '',
        updated: ''
      },
      templateRules: {
        associatedCityList: [{ required: true }],
        templateType: [
          { required: true, message: '请输入模板类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请输入运送类型', trigger: 'change' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getFreightList()
  },
  methods: {
    // 渲染
    async getFreightList() {
      const res = await freightManageList()
      this.freightlist = res.data
      console.log(this.freightlist)
    },
    // 映射改字
    formatterTemplate(row) {
      const MAP = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互济',
        4: '跨省'
      }
      return MAP[row.templateType]
    },
    formatterTransport(row) {
      const MAP = {
        1: '普快',
        2: '特快'
      }
      return MAP[row.transportType]
    },
    formatterAssociated(row) {
      const MAP = {
        1: '全国',
        2: '京津冀',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      }
      // 数组就遍历之后返回最后的结果
      const list = row.associatedCityList
        .map(item => {
          // console.log(item)
          // 对象的中括号语法
          if (item !== undefined) {
            return MAP[item]
          }
        })
        .join('')
      return list
    },
    // 关闭弹框
    close() {
      // 关闭弹框
      this.dialogVisible = false
      // 重置表单
      this.$refs.ruleFrom.resetFields()
      // 重置数据
      this.templateData = {
        associatedCityList: [],
        computeWeight: '',
        continuousWeight: '',
        created: '',
        expense: '',
        firstWeight: '',
        id: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: '',
        updated: ''
      }
    },
    // 点X
    handleClose() {
      this.close()
    },
    // 打开弹框
    newAdd() {
      this.dialogVisible = true
      this.title = '新增模板'
    },
    // 添加/编辑
    add() {
      // 字符型变数字型
      this.templateData.firstWeight = Number(this.templateData.firstWeight)
      this.templateData.continuousWeight = Number(this.templateData.continuousWeight)
      this.templateData.lightThrowingCoefficient = Number(this.templateData.lightThrowingCoefficient)
      // 如果不是经济就给cityAll
      if (this.templateData.templateType !== 3) {
        this.templateData.associatedCityList = this.cityAll
      }
      // 遍历数组获取数字
      this.templateData.associatedCityList = this.templateData.associatedCityList.map(
        item => {
          if (item === '全国') return 1
          if (item === '京津冀') return 2
          if (item === '江浙沪') return 3
          if (item === '川渝') return 4
          if (item === '黑吉辽') return 5
        }
      )
      this.$refs.ruleFrom.validate(async valid => {
        if (valid) {
          // 调用接口
          if (this.templateData.id) {
            // console.log(this.templateData.id)
            const res = await freightManageOperate(this.templateData)
            if (res.msg === 'ok') {
              this.$message.success('编辑成功')
            } else {
              this.$message.error(res.msg)
            }
          } else {
            const res = await freightManageOperate(this.templateData)
            if (res.msg === 'ok') {
              this.$message.success('添加成功')
            } else {
              this.$message.error(res.msg)
            }
          }
          // 重新渲染
          this.getFreightList()
          this.close()
        } else {
          this.$message.error('不能为空')
        }
      })
    },
    // 编辑回填
    edit(row) {
      this.title = '编辑模板'
      // 解构数据
      const {
        associatedCityList,
        computeWeight,
        continuousWeight,
        created,
        expense,
        firstWeight,
        id,
        lightThrowingCoefficient,
        templateType,
        transportType,
        updated
      } = row
      // 赋值
      this.templateData = {
        associatedCityList,
        computeWeight,
        continuousWeight,
        created,
        expense,
        firstWeight,
        id,
        lightThrowingCoefficient,
        templateType,
        transportType,
        updated
      }
      // 打开弹框
      this.dialogVisible = true
      // 回填多选
      this.templateData.associatedCityList = associatedCityList.map(item => {
        if (item === '2') return '京津冀'
        if (item === '3') return '江浙沪'
        if (item === '4') return '川渝'
        if (item === '5') return '黑吉辽'
      })
    },
    // 删除数据
    del(id) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 掉接口
          await freightManageDelete(id)
          // 提示
          this.$message.success('删除成功!')
          // 重新渲染
          this.getFreightList()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  padding: 30px;
  background-color: #fff;
  margin: 20px;
  .btn{
    margin-bottom: 20px;
  }
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}
</style>
